<template>
	<!-- mine/pages/personalAccount/personalAccount.wxml -->
	<view class="personalBox" :style="objColor">
		<customer></customer>
		<!-- 收支记录 -->
		<view class="record">
			<view class="record_top" v-if="recordsList.length > 0">
				<view class="title">充值记录</view>
				<view class="more" @tap="goRefund" v-if='sellerNo !="changzhi"'>申请退款</view>
			</view>
			<view class="record_box">
				<view class="record_item" v-if="recordsList.length > 0" v-for="(item, index) in recordsList" :key="index" @click="goInfo(item.id)">
					<view class="itemDisplay">
						<view class="itemTitle">
							<view class="name">
								{{ item.eventNameStr }}
								<text v-if="item.busId">({{ item.busId }})</text>
							</view>
						</view>
						<view :class="item.amountChange > 0 ? 'changeAmount1' : 'changeAmount'">{{ item.amountChange > 0 ? '+' + item.amountChange : item.amountChange }}</view>
					</view>

					<view class="itemDisplay">
						<view class="time">{{ item.createTime }}</view>
						<!--<view class="balance">-->
						<!--余额：<view class="money">{{ item.accountBalance }}</view>-->
						<!--</view>-->
						<view class="balance">充值成功</view>
						<image src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/turn.png" class="icon"></image>
					</view>
				</view>
				<view v-if="recordsList.length == 0&&loading">
					<Upgrading text="暂无充值记录"></Upgrading>
				</view>
			</view>

			<!-- <view class="record_item">
<view class="itemDisplay">
	<view class="itemTitle"><view class="name">南方众悦奥体充电站南方众悦奥体充电站</view><view class="tag">退款核销</view></view>
	<view class="changeAmount1">+79.25</view>
</view>
<view class="itemDisplay">
	<view class="balance">余额：<view class="money">46.20</view>
	</view>
	<view class="time">2022-05-20 13:23:23</view>
</view>
</view> -->
		</view>
	</view>
</template>

<script>
	'use strict';
	import Upgrading from '../../../components/upgrading/upgrading';
	import Payment from '@/components/payment/payment';

	// exports.__esModule = true; // mine/pages/personalAccount/personalAccount.ts

	var app = getApp();

	var https_1 = require('./../../../api/https.js');
	export default {
		components: {
			Upgrading
		},
		data() {
			return {
				loading:false,
				showBalanceFreeze: false,
				showJiangLiBalanceFreeze: false,
				accountType: 1,
				showExplain:false,
				accountInfo: {
					accountBalance: '',
					balanceFreeze: '',
					jiangLiBalance: '',
					jiangLiBalanceFreeze: '',
					deductMode: ''
				},
				refundAmountInfo:{},
				customPrice: '',

				//收支记录
				recordsList: [],

				orderNo: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			if (options.tab) {
				this.accountType= options.tab
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function () {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function () {
			this.getPageList();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function () {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function () {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function () {},
		methods: {
			//收支记录
			getPageList: function () {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.loading=false
				https_1
					.pageList({
						accountType: this.accountType,
						tab: 2,
						current: 1,
						size: 1000
					})
					.then(function (res) {
						var data = res.data.accountFlowMiniVO.records;
						data.forEach(function (element) {
							element.amountChange = (element.amountChange / 100).toFixed(2);
							element.accountBalance = (element.accountBalance / 100).toFixed(2);
						});
						that.recordsList = data.filter((item)=>{return item.eventName === 2})
						uni.hideLoading();
						that.loading=true
					})
					['catch'](function (res) {
					uni.hideLoading();
				});
			},

			goInfo(id){
				uni.navigateTo({url:'../rechargeInfo/rechargeInfo?id='+id})
			},
			goRefund(){
				uni.navigateTo({url:'../refund/refund'})
			},
		}
	};
</script>
<style>
	page {
		background-color: #F2F3F5;
	}
</style>
<style lang="less" scoped>
	/* mine/pages/personalAccount/personalAccount.wxss */
	@import "../../../commin/commin.less";
	*{
		box-sizing: border-box;
	}
	.record {
		margin-bottom: 40rpx;
		padding: 0 24rpx;
		background-color: #F2F3F5;

		.record_top {
			display: flex;
			justify-content: space-between;
			.paddings(40rpx, 32rpx, 24rpx, 32rpx);

			.title {
				.fontsize(32rpx);
				font-family: PingFang SC;
				font-weight: bold;
				color: @text-color2;
			}

			.more {
				display: flex;
				align-items: center;
				.fontsize(28rpx);
				font-family: PingFang SC;
				font-weight: 500;
				color: var(--textColor);

				.img {
					.kuangao(11rpx, 18rpx);
					margin-left: 12rpx;
				}
			}
		}
		.record_box{
			border-radius: 16rpx;
			overflow: hidden;
		}
		.record_item{
			box-sizing: border-box;
			.paddings(40rpx,32rpx,0,32rpx);
			padding-bottom: 40rpx;
			border-bottom: 1rpx dashed #C0C4CC;
			background-color: #fff;
			.itemDisplay{
				display: flex;
				justify-content: space-between;
				position: relative;
				padding-right: 36rpx;
				box-sizing: border-box;
				.itemTitle{
					display: flex;
					align-items: center;
					margin-bottom: 23rpx;
					.name{

						.kuan(350rpx);
						overflow:hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow:ellipsis;
						.fontsize(30rpx);
						font-family: PingFang SC;
						font-weight: bold;
						color: @text-color1;

					}
					.tag{
						margin-left: 16rpx;
						.kuangao(118rpx,32rpx);
						.lineheight(32rpx);
						.borders(1rpx,@blue);
						text-align: center;
						background: rgba(20, 135, 250, 0.06);
						border-radius: 16rpx;
						.fontsize(22rpx);
						font-family: PingFang SC;
						font-weight: 500;
						color: @blue;
					}
				}
				.changeAmount{
					.fontsize(34rpx);
					font-family: DIN;
					font-weight: bold;
					color: @text-color1;
				}
				.changeAmount1{
					.fontsize(34rpx);
					font-family: DIN;
					font-weight: bold;
					color: @orange;
				}
				.balance{
					display: flex;
					.fontsize(26rpx);
					font-family: PingFang SC;
					font-weight: 500;
					color: @text-color3;
					.money{
						color: @orange;
					}
				}
				.time{
					.fontsize(24rpx);
					font-family: PingFang SC;
					font-weight: 400;
					color: @text-color3;
				}
				.icon{
					width: 16rpx;
					height: 27rpx;
					position: absolute;
					right: 0;
					top: -30rpx;
					z-index: 1;
				}
			}
		}
		.record_item:last-child { border-bottom: 0rpx;}
	}

</style>
